<template>
  <van-nav-bar
    class="navbar"
    :class="cls"
    left-arrow
    @click-left="$router.go(-1)"
  >
    <span slot="title" v-if="title">{{ title }}</span>
  </van-nav-bar>
</template>

<script>
export default {
  props: {
    sticky: {
      type: Boolean,
      default: true
    },
    fixed: {
      type: Boolean,
      default: false
    },
    leftText: {
      type: String,
      default: ''
    },
    transparent: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  computed: {
    cls() {
      return {
        'fixed-navbar': this.fixed,
        'sticky-navbar': this.sticky,
        'transparent-navbar': this.transparent
      }
    }
  }
}
</script>

<style lang="less" scoped>
.navbar {
  height: 44px;
  /deep/ .van-nav-bar__arrow {
    font-size: 20px;
  }
  /deep/ .van-nav-bar__left {
    left: 6px;
  }
}
.sticky-navbar {
  z-index: 252;
  position: sticky;
  top: 0;
}

.fixed-navbar {
  z-index: 25;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

.transparent-navbar {
  background: transparent;
  &::after {
    display: none;
  }
}
</style>
